<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /*
        Web Storage
          file协议下通用可以使用

          localStorage
            域名的时效性,大小：5MB

          sessionStorage
            当前窗口的会话级

          同时继承与Storage
            属性：
              length：本地存储数据的数量
              key(): 通过索引找到存储的数据，不同浏览器下实现方式不一致，存和取的顺序不一致
              getItem(key): 通过键名获取存储的数据
              setItem(key, value): 删除一个本地存储数据
              remove(key): 通过key移除数据
              clear(): 清空本地存储数据
        注意
          1. 不能跨越
          2. 浏览器隐式模式会在数据存储时创建临时数据库，在关闭浏览器隐私模式，会将存储在本地临时数据库删除掉
      */

      localStorage.setItem("name", "kalvion");
      console.log(localStorage.length);
      console.log(localStorage.getItem("name"));
      localStorage.setItem("color", JSON.stringify(["red", "green"]));

      // localStorage 通信
    </script>
  </body>
</html>
